{% extends "base.html" %}

{% block pagedef %} Upload collection > Browse collection {% endblock %}

{% block script %}
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#suggestions').text('Processing...');
    $('#suggestions').load( "suggestions" ); 
}); 
$(document).ready(function(){
//    $("#exemplequery").hide();
    $("#exemplelink").click(function () {
        $("#exemplequery").slideToggle("slow");
    });
});
function unselectAll(){
    $(document).ready( function(){
       $("input.restrict").removeAttr( "checked" );
    });
}
function selectAll(){
    $(document).ready( function(){
       $("input.restrict").attr( "checked", "checked" );
    });
}
function selectGenre( genre ){
    $(document).ready( function(){
        if( $("span[genre="+genre+"] input").attr("check")){
           $("span[genre="+genre+"] input").removeAttr( "check" );
           $("span[genre="+genre+"] input").removeAttr( "checked" );
        }
        else{
            $("span[genre="+genre+"]  input").attr("check", "check");
            $("span[genre="+genre+"]  input").attr("checked", "checked");
        }
    });
}

$(document).ready(function(){
    $("div.source").hide(); });

function togglesource(idNode, error_line){
    $(document).ready(function(){
        $("#image_load").hide();
        $("#image_tree img").removeAttr( "src" );
        $("#fetching_msg").html( '<b> Fetching image... </b>' );
        $("#fetching_msg").show();
        var tree_name = $('#a'+idNode).text();
        $("#tree_name_legend").text('Selected tree is "'+tree_name+'"');
        if (error_line){
            var url = "get_tree_source/"+idNode;
        }
        else{
            var url = "get_tree_source/"+idNode+"?internal_label=1";
        }
        $.getJSON(url, {}, function(data){
            if( data.error_line){
                var source = '<font color="red"><pre><span class="treesource">'+data.source+'<br />'+data.error_line+'</span></pre></font>';
            }
            else{
                var source = '<textarea cols=100 rows=30>'+data.source+'</textarea>';
            }
            $("#treenewick").html( source );
            if (data.error_line){
                $("#fetching_msg").html( '<b style="color:red"> bad tree, image can\'t be fecthed </b>' );
                $("#fetching_msg").show();
                $('#tab_reference_tree').disableTab(1);
                $('#tab_reference_tree').disableTab(2);
            }
            else{
                $('#tab_reference_tree').enableTab(1);
                $('#tab_reference_tree').enableTab(2);
                $.get("get_phyfi_tree_image_url/"+idNode+"?internal_label=1", {}, function(data){
                    $("#image_tree img").attr( "src", data );
                    $("#fetching_msg").hide();
                    $("#image_load").show();
                });
                $.get("single_reference_tree/"+idNode, {}, function(data){
                        $("#tree_arborescence").html( data );
                });
            }
        });
    });
}

$(document).ready( function(){
    $("#image_load").hide();
    $('#tab_reference_tree').tabs(); 
});

</script>
{% endblock %}

{% block idpage %}/phyloexplorer/browse{% endblock %}

{% block content %}
<a href="#bottom" class="posPage">&nbsp;Go to bottom&nbsp;</a>
<br />
<center>
Here you can view each individual tree of the collection and the corresponding
excerpt of the taxonomy. <br />For each tree, ambiguous leaves (i.e.
<i>those that are not uniquely associated to a scientific name present in the
taxonomy</i>) are
indicated by a "?". 
<br />Clades are named by the smallest  taxonomic group
containing all their leaves. When a clade contains ambiguous leaves, those
leaves are not taken into account to assign its name but "?" are added to this
latter to reflect this approximation.
</center>
<br />
<br />
<!-- CONTENU : BEGINNING____________________________________________________________________ -->
<fieldset> <legend> Trees list </legend>
<div id="tree_view">
    {% for idtree, name, source, error_line in trees_list %}
        <b> <a id="a{{idtree}}" href="#image_tree" onclick="javascript:togglesource('{{idtree}}', '{{error_line}}');"
        {%if error_line %} style="color:red" {% else %} style="color:black" {% endif %} > {{name}} </a> </b>
        {% if not error_line %}
        <a href="http://www.phylowidget.org/full/index.html?tree='{{source}}'" target="_blank"
           title="Visualize this tree using PhyloWidget" style="color:white"><img src="/site_media/logo_pw.ico" /></a>
        {% endif %}
        <br />
    {% endfor %}
</div>
</fieldset>
<br />
<fieldset>
<legend id="tree_name_legend">No tree selected</legend>
<div id="tab_reference_tree">
    <ul>
        <li><a href="#image_tree"><span>Image</span></a></li>
        <li><a href="#arborescence"><span>Browsable {{taxo_engine|upper}} excerpt</span></a></li>
        <li><a href="#source"><span>Newick format</span></a></li>
    </ul>
    <div id="image_tree">
        <div id="image_load"><img class="img"></img></div>
        <span id="fetching_msg"></span>
    </div>
    <div id="arborescence">
        <!-- Tree visualization -->
        <div class="tree">
        <br />
        <tt>
        <span id="tree_arborescence"></span>
        </tt>
        <br />
        </div>
    </div>
    <div id="source">
        <span id="treenewick"></span>
    </div>
</div>
</fieldset>
</div>

<!-- div preview -->
<div id="preview"></div>

{% if error_msg %} <div  class="error">{{ error_msg }}</div>{% endif %}
    <a href="#top" class="posPage">&nbsp;Go to top&nbsp;</a>
<!-- CONTENT : END -->
{% endblock %}
